// Button sizes
.tag-size(@padding-y; @padding-x; @font-size; @line-height; @border-radius) {
  padding: @padding-y @padding-x;
  font-size: @font-size;
  line-height: @line-height;
  border-radius: @border-radius;
}

.nom-tag {
  /* Structure */
  display: inline-block;
  color: @text-color-lt;
  line-height: normal;
  white-space: nowrap;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  background-color: var(--nom-tag-background-color);
  border: 1px solid transparent;
  border-color: var(--nom-border-color);
  border-radius: 2px;
  user-select: none;
  zoom: 0.95;
  &.nom-tag-pointer {
    cursor: pointer;
  }
  .tag-size(@padding-y-base; @padding-x-base; @font-size-base; @line-height-base; @border-radius);

  &.p-size-sm {
    // line-height: ensure proper height of button next to small input
    .tag-size(@padding-y-sm; @padding-x-sm; @font-size-sm; @line-height-sm; @border-radius-sm);
  }

  &.p-size-xs {
    // line-height: ensure proper height of button next to small input
    .tag-size(@padding-y-xs; @padding-x-xs; @font-size-sm; @line-height-sm; @border-radius-sm);
  }

  &.p-size-lg {
    // line-height: ensure proper height of button next to small input
    .tag-size(@padding-y-lg; @padding-x-lg; @font-size-lg; @line-height-lg; @border-radius-lg);
  }

  &.p-size-xl {
    // line-height: ensure proper height of button next to small input
    .tag-size(@padding-y-xl; @padding-x-xl; @font-size-xl; @line-height-lg; @border-radius-lg);
  }

  &.p-with-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  &.p-type-round {
    min-width: 1.75rem;
  }

  .nom-tag-content {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block !important;
  }

  > .nom-icon {
    display: inline-flex;
  }

  > .nom-icon + span,
  > span + .nom-icon {
    margin-left: 0.1rem;
  }

  .nom-tag-remove {
    svg {
      fill: var(--nom-tag-remove-color);
    }

    &.nom-tag-remove-basic {
      svg {
        fill: var(--nom-tag-remove-basic-color);
      }
    }
  }

  &.p-color-red {
    color: rgb(var(--nom-white));
    background-color: rgb(var(--nom-red-8));
    border-color: rgb(var(--nom-red-8));
  }

  &.p-color-orange {
    color: rgb(var(--nom-white));
    background-color: rgb(var(--nom-orange-4));
    border-color: rgb(var(--nom-orange-4));
  }

  &.p-color-yellow {
    color: rgb(var(--nom-white));
    background-color: rgb(var(--nom-yellow-4));
    border-color: rgb(var(--nom-yellow-4));
  }

  &.p-color-olive {
    color: rgb(var(--nom-white));
    background-color: rgb(var(--nom-lime-4));
    border-color: rgb(var(--nom-lime-4));
  }

  &.p-color-green {
    color: rgb(var(--nom-white));
    background-color: rgb(var(--nom-green-4));
    border-color: rgb(var(--nom-green-4));
  }

  &.p-color-teal {
    color: rgb(var(--nom-white));
    background-color: rgb(var(--nom-cyan-4));
    border-color: rgb(var(--nom-cyan-4));
  }

  &.p-color-blue {
    color: rgb(var(--nom-white));
    background-color: rgb(var(--nom-indigo-4));
    border-color: rgb(var(--nom-indigo-4));
  }

  &.p-color-violet {
    color: rgb(var(--nom-white));
    background-color: rgb(var(--nom-grape-4));
    border-color: rgb(var(--nom-grape-4));
  }

  &.p-color-purple {
    color: rgb(var(--nom-white));
    background-color: rgb(var(--nom-grape-2));
    border-color: rgb(var(--nom-grape-2));
  }

  &.p-color-pink {
    color: rgb(var(--nom-white));
    background-color: rgb(var(--nom-pink-4));
    border-color: rgb(var(--nom-pink-4));
  }

  &.p-color-brown {
    color: rgb(var(--nom-white));
    background-color: rgb(var(--nom-orange-3));
    border-color: rgb(var(--nom-orange-3));
  }

  &.p-color-crimson {
    color: rgb(var(--nom-white));
    background-color: rgb(var(--nom-red-6));
    border-color: rgb(var(--nom-red-6));
  }

  &.p-color-skyblue {
    color: rgb(var(--nom-white));
    background-color: rgb(var(--nom-blue-4));
    border-color: rgb(var(--nom-blue-4));
  }

  &.p-color-silver {
    color: rgb(var(--nom-grey-9));
    background-color: rgb(var(--nom-grey-2));
    border-color: rgb(var(--nom-grey-2));
  }
}
